<script setup>
import { ref, onMounted, reactive, nextTick } from 'vue'
import { getUserInfo, update } from '@/api/edit'
import { ElMessage } from 'element-plus'
import router from '@/router'


nextTick(() => {
  getUserInfo().then(res => {
    console.log(res.data.data);

    user.value = res.data.data.data
  })
})


const user = ref({})

const form = ref(true)

const formRef = ref(null) // 表单引用

const getUser = async () => {
  const res = await getUserInfo()
  if (res.data.code === "200") {
    user.value = res.data.data.data
  } else {
    ElMessage.error('系统错误')
  }
}

// 编辑/保存切换
const toggleForm = () => {
  if (!form.value) {
    formRef.value.resetFields()
  }
  form.value = !form.value
}

// 保存编辑
const edit = async () => {
  const res = await update(user.value)
  if (res.data.code === "200") {
    ElMessage.success("修改成功！")
    form.value = true
    router.push('/login')
  } else {
    ElMessage.error(res.data.msg || '修改失败')
  }

}

onMounted(() => {
  getUser()
})
</script>
<template>
  <el-card>
    <el-form ref="formRef" :model="user" label-width="100px">
      <!-- 头像单独一行 -->
      <el-row justify="center" class="avatar-row">
        <el-col :span="24">
          <div class="avatar-container">
            <el-form-item label="" class="avatar-item">
              <!-- https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png -->
               <!-- <img src="../../assets/it2.png"> -->
              <el-avatar src="http://localhost:8888/message/send/4" :size="110" style="margin-left: -115px;"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <!-- 数据部分保持左右布局 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="员工姓名" prop="name">
            <el-input v-model="user.name" :disabled="form" />
          </el-form-item>
          <el-form-item label="员工手机" prop="phone">
            <el-input v-model="user.phone" :disabled="form" />
          </el-form-item>

          <el-form-item label="部门名称" prop="department">
            <el-input v-model="user.departmentName" disabled />
          </el-form-item>
          <el-form-item label="职位" prop="position">
            <el-input v-model="user.positionName" disabled />
          </el-form-item>

        </el-col>

        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="user.sex" :disabled="form">
              <el-option label="男" value="1" />
              <el-option label="女" value="2" />
              <el-option label="未知" value="null" />
            </el-select>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="user.email" :disabled="form" />
          </el-form-item>

          <el-form-item label="部门人数" prop="departmentSize">
            <el-input v-model="user.departmentSize" disabled />
          </el-form-item>
          <el-form-item label="入职时间" prop="createDate">
            <el-input v-model="user.createDate" disabled />
          </el-form-item>

        </el-col>
      </el-row>

      <el-row justify="end" class="mt-4">
        <el-button @click="toggleForm">{{ form ? '取消' : '重置' }}</el-button>
        <el-button type="primary" @click="form ? toggleForm() : edit()">
          {{ form ? '编辑' : '保存' }}
        </el-button>
      </el-row>
    </el-form>
  </el-card>
</template>

<style scoped>
.avatar-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.avatar-row {
  margin-bottom: 20px;
}

.avatar-item {
  display: flex;
  justify-content: center;
  align-items: center;

  :deep(.el-form-item__content) {
    justify-content: center;
  }
}

.avatar-box {
  /* background-color: #f5f7fa; */
  border: 1px dashed #dcdfe6;
  background-image: url("../../assets/it3.png");
}

.mt-4 {
  margin-top: 1rem;
}
</style>